<template>
  <div class="lei-da-box">
    <div class="header">
      <div class="title">雷达图</div>
      <div class="tool" @click="goToWaterBallPage">
        {{ $store.state.fullScreenStatus["leiDa"] ? "返回主页" : "全屏" }}
      </div>
    </div>
    <div class="lei-da" ref="lei-da">我是水球图</div>
  </div>
</template>

<script>
/*
 *@Date: 2023-11-15 09:39:24
 *@Description: 模块描述
 */
import { mapMutations } from "vuex"
import "@/utils/echarts-wordcloud.min.js"
export default {
  name: "",
  data() {
    return {
      myCharts: null,
    }
  },
  created() {},
  mounted() {
    this.initEcharts()
    window.addEventListener("resize", this.screenUpdate)
  },
  destroyed() {
    this.myCharts.dispose()
    this.myCharts = null
    window.removeEventListener("resize", this.screenUpdate())
  },
  methods: {
    ...mapMutations([
      //使用es6的拓展运算符
      "changeFullScreenStatus",
    ]),
    // 初始化图表
    initEcharts() {
      const leiDa = document.querySelector(".lei-da")
      this.myCharts = this.$echarts.init(leiDa)

      const areaData = [
        {
          name: "闯红灯",
          max: 1000,
          value: 350,
        },
        {
          name: "逆行",
          max: 1000,
          value: 500,
        },
        {
          name: "占用机动车道",
          max: 1000,
          value: 200,
        },
        {
          name: "超载",
          max: 1000,
          value: 250,
        },
        {
          name: "未戴安全头盔",
          max: 1000,
          value: 500,
        },
        {
          name: "加装伞具",
          max: 1000,
          value: 702,
        },
      ]
      const data = []
      areaData.forEach((item) => {
        data.push(item.value)
      })
      let maxNum = Math.max(...data) //获取数组中最大的值
      // 向上取整十，整百，整千，整万的方法
      function ceilNumber(number) {
        let bite = 0
        if (number < 10) {
          return 10
        }
        while (number >= 10) {
          number /= 10
          bite += 1
        }
        return Math.ceil(number) * Math.pow(10, bite)
      }
      let allMax = ceilNumber(maxNum) //将最大的值进行向上取整
      areaData.forEach((item) => {
        item.max = allMax
      })
      let data1 = [0, 0, 0, 0, 0, 0]
      let data2 = [0, 0, 0, 0, 0, 0]
      let data3 = [0, 0, 0, 0, 0, 0]
      let data4 = [0, 0, 0, 0, 0, 0]
      let data5 = [0, 0, 0, 0, 0, 0]
      let data6 = [0, 0, 0, 0, 0, 0]
      data1[0] = data[0]
      data2[1] = data[1]
      data3[2] = data[2]
      data4[3] = data[3]
      data5[4] = data[4]
      data6[5] = data[5]
      let option = {
        // backgroundColor: "#092A4E",
        color: [
          "#2E64FF",
          "#F0D418",
          "#FF9B42",
          "#FF6B6B",
          "#8E42FF",
          "#00e4ff",
        ],
        legend: {
          trigger: "item",
          orient: "vertical",
          top: `${this.$fitChartFont(40)}px`,
          left: `${this.$fitChartFont(0)}px`,
          textStyle: {
            color: "#fff",
            fontSize:`${this.$fitChartFont(12)}px`
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return params.name + ": " + params.value + "辆"
          },
        },
        radar: {
          zlevel: this.$fitChartFont(11),
          shape: "circle",
          scale: true,
          indicator: areaData,
          center: ["50%", "50%"],
          radius: "40%",
          nameGap: "0",
          startAngle: this.$fitChartFont(90),
          name: {
            show: false,
            color: "red",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(32,126,255, .5)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(32,126,255, .5)",
            },
          },
          splitArea: {
            areaStyle: {
              color: "rgba(32,126,255, 0.1)",
            },
          },
        },
        polar: {
          radius: "40%",
        },
        angleAxis: {
          zlevel: 0,
          min: 0,
          max: 360,
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          zlevel: 0,
          min: 0,
          max: allMax,
          axisLabel: {
            textStyle: {
              color: "rgba(29,208,240,.5)",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            type: "radar",
            symbolSize: this.$fitChartFont(12),
            symbol: "circle",
            tooltip: {
              trigger: "none",
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: function (params) {
                    if (params.value !== 0) {
                      return params.value + "辆"
                    } else {
                      return ""
                    }
                  },
                  color: "#ffffff",
                  fontSize: this.$fitChartFont(12),
                  distance: 0,
                },
              },
            },
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(32,126,255, 0.5)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(32,126,255, 0.1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: [
              {
                value: data,
              },
              {
                value: data1,
                itemStyle: {
                  color: "#2e64ff",
                },
                lineStyle: {
                  color: "transparent", //设置折线的颜色
                },
              },
              {
                value: data2,
                itemStyle: {
                  color: "#f0d418",
                },
                lineStyle: {
                  color: "transparent", //设置折线的颜色
                },
              },
              {
                value: data3,
                itemStyle: {
                  color: "#ff9b42",
                },
                lineStyle: {
                  color: "transparent", //设置折线的颜色
                },
              },
              {
                value: data4,
                itemStyle: {
                  color: "#ff6b6b",
                },
                lineStyle: {
                  color: "transparent", //设置折线的颜色
                },
              },
              {
                value: data5,
                itemStyle: {
                  color: "#8e42ff",
                },
                lineStyle: {
                  color: "transparent", //设置折线的颜色
                },
              },
              {
                value: data6,
                itemStyle: {
                  color: "#00e4ff",
                },
                lineStyle: {
                  color: "transparent", //设置折线的颜色
                },
              },
              {
                value: [0, 0, 0, 0, 0, 0],
                // name: '违章占比',
                symbolSize: this.$fitChartFont(13),
                itemStyle: {
                  color: "rgba(40, 97, 132)",
                },
              },
            ],
            zlevel: this.$fitChartFont(20),
            z: this.$fitChartFont(4),
          },
          {
            type: "pie",
            startAngle: 90,
            clockwise: false, //逆时针
            data: areaData.map((item) => {
              return {
                name: item.name,
                value: item.value,
              }
            }),
            radius: ["45%", "60%"],
            zlevel: -1,
            label: {
              normal: {
                formatter: "{d}%",
                position: "right",
                fontSize: `${this.$fitChartFont(14)}`,
                color: "#fff",
              },
            },
          },
        ],
      }

      if (this.myCharts) {
        this.myCharts.setOption(option)
      }
      // 设置词云图配置项
      this.myCharts.setOption(option)

      // 添加拖拽事件监听
      this.myCharts.getZr().on("dragstart", () => {
        this.myCharts.dispatchAction({
          type: "takeGlobalCursor",
          key: "dataZoomSelect",
          dataZoomSelectActive: true,
        })
      })

      this.myCharts.getZr().on("dragend", () => {
        this.myCharts.dispatchAction({
          type: "takeGlobalCursor",
          key: "dataZoomSelect",
          dataZoomSelectActive: false,
        })
      })
    },
    // 图表socket数据更新
    updateData() {
      // const option = {
      // }
      // this.myCharts.setOption(option)
      // this.myCharts.resize()
    },
    // 视口大小改变时，图表渲染
    screenUpdate() {
      let nameList = [
        "亲切",
        "疑难解答",
        "启发",
        "友好",
        "扩展思维",
        "思考能力",
        "知识",
        "关心",
        "平易近人",
        "认真负责",
      ]
      let valueList = [30, 50, 60, 65, 70, 80, 90, 100, 120, 150]

      let colorList = ["#FAAD14", "#13C2C2", "#14A8FF", "#23D688", "#397EF0"]
      let fontSizeList = [
        this.$fitChartFont(12),
        this.$fitChartFont(14),
        this.$fitChartFont(16),
        this.$fitChartFont(18),
      ]
      let data = []

      nameList.map((item, index) => {
        let i = parseInt(index / 4)
        data.push({
          name: item,
          value: valueList[i],
          label: {
            color: colorList[i],
            fontSize: fontSizeList[i],
          },
        })
      })

      const option = {
        color: colorList,
        graphic: [
          {
            id: "baPng",
            type: "image",
            left: "center",
            top: "center",
          },
        ],
        series: [
          {
            type: "graph",
            layout: "force",
            force: {
              repulsion: this.$fitChartFont(85), // 节点之间的斥力因子
              edgeLength: this.$fitChartFont(85), //边的两个节点之间的距离
              layoutAnimation: true,
              friction: 0.3,
            },
            roam: false,
            symbol: "",
            symbolSize: 0,
            label: {
              show: true,
              color: "auto",
            },
            draggable: false,
            data: data,
          },
        ],
      }

      if (this.myCharts) {
        this.myCharts.setOption(option)
        this.myCharts.resize()
      }
    },
    goToWaterBallPage() {
      if (!this.$store.state.fullScreenStatus.leiDa) {
        this.$router.push("/leiDaPage")
        this.changeFullScreenStatus({ type: "leiDa", value: true })
      } else {
        this.$router.back(1)
        this.changeFullScreenStatus({ type: "leiDa", value: false })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.lei-da,
.lei-da-box {
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    position: absolute;
    width: 100%;
    padding: vw(5);
    z-index: 9;
    display: flex;
    justify-content: space-between;
    .title {
      color: white;
      font-size: vw(20);
    }
    .tool {
      cursor: pointer;
      color: white;
      font-size: vw(20);
    }
  }
}
</style>

